<template>
  <div>
    <div v-if="isPageShow" class="wrap">
      <!-- header头部 -->
      <!-- <m-header
        :backcolor="'#1968FA'"
        :color="'#fff'"
        opacity="1"
        hocolor="#fff"
        filter="blur(0px)"
      ></m-header> -->
      <div style="height: 50px"></div>
      <div class="container" style="width: 100%; max-width: 1200px">
        <div class="content">
          <div class="right-box">
            <!-- menu栏 -->
            <m-Menu activeDefault="2"></m-Menu>
            <!--  -->
          </div>
          <div class="left-box" v-loading="$store.state.isLoading">
            <div class="top">
              <div class="title">班级管理</div>
              <el-divider></el-divider>
              <div style="display: flex; justify-content: space-between">
                <div>
                  <el-input
                    placeholder="请输入班级名称"
                    v-model.trim="className"
                    class="input"
                    clearable
                  >
                  </el-input>
                  <el-button
                    style="margin-left: 20px; background: #1968fa; color: #fff"
                    type="primary"
                    plain
                    class="btn"
                    @click="hanldeGetClassList(true)"
                    >查询</el-button
                  >
                </div>
                <el-button
                  v-if="isAddclass"
                  type="primary"
                  icon="el-icon-circle-plus"
                  style="color: #1968fa; background: #fff; margin-right: 20px"
                  size="mini"
                  plain
                  @click="() => $router.push('/saveclass')"
                  >添加班级</el-button
                >
              </div>
            </div>
            <div class="bottom">
              <el-table
                :data="tableData"
                style="width: 100%; margin-top: 30px"
                :header-cell-style="{ background: '#E4EEFF', color: '#333333' }"
              >
                <el-table-column prop="name" label="班级名称" align="center">
                </el-table-column>
                <el-table-column prop="stuNum" label="人数" align="center">
                </el-table-column>
                <el-table-column
                  prop="createrDate"
                  label="创建时间"
                  align="center"
                >
                </el-table-column>
                <el-table-column label="操作" width="280" align="center">
                  <template slot-scope="scope">
                    <span
                      style="margin: 0px 10px; color: #1968fa; cursor: pointer"
                      @click="handleQueryClass(scope.row)"
                      >详情</span
                    >
                    <span
                      style="margin: 0px 10px; color: #fa1900; cursor: pointer"
                      @click="handleIsDelete(scope.row)"
                      >刪除</span
                    >
                  </template>
                </el-table-column>
                <div slot="empty" class="empty">
                  <img src="../../assets/images/empty.png" alt="" />
                  <span @click="() => $router.push('/saveclass')" class="text">
                    暂无班级信息,点击创建
                  </span>
                </div>
              </el-table>
            </div>
            <div class="clearfix">
              <el-pagination
                class="pull-right"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[5, 10, 20, 30, 40]"
                :page-size="pageSize"
                layout="total,prev,pager,next,sizes,jumper"
                :total="totalCount"
              ></el-pagination>
            </div>
          </div>
        </div>
      </div>
      <!-- footer页脚 -->
      <!-- <m-fotter /> -->
    </div>
  </div>
</template>

<script>
import { STATUS_CODE_OK } from "@/config";
import { getClassList, deleteClass } from "@/api/personalCenter.js";
// import MHeader from "@/components/MHeader.vue";
// import MFotter from "@/components/MFotter.vue";
import MMenu from "@/components/MMenu.vue";
export default {
  name: "SearchPage",
  data() {
    return {
      isAddclass: false, // 添加班级按钮显示隐藏
      isPageShow: true, //页面是否显示
      dataList: {},
      className: "",
      tableData: [],
      currentPage: 1, // 页数
      pageSize: 5, // 条数
      totalCount: 0, // 总条数
    };
  },
  created() {
    if (localStorage.getItem("USER_DATA")) {
      this.isAddclass =
        JSON.parse(localStorage.getItem("USER_DATA")).type == "1"
          ? true
          : false;
    }

    this.hanldeGetClassList(true);
  },
  methods: {
    // 跳转班级详情
    handleQueryClass(item) {
      this.$router.push({
        name: "classDetails",
        params: { row: item },
      });
    },
    // 获取班级列表
    async hanldeGetClassList(isReFresh = false) {
      if (isReFresh) {
        this.currentPage = 1;
      }
      let { data } = await getClassList({
        className: this.className,
        pageNum: this.currentPage,
        pageSize: this.pageSize,
      });
      if (data.code == STATUS_CODE_OK) {
        this.tableData = data.data.records;
        this.totalCount = Number(data.data.total);
      }
    },
    // 确认是否删除
    async handleIsDelete(item) {
      try {
        await this.$confirm("将删除班级下所有学生, 是否删除?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        });
        this.handleDeleteClass(item);
      } catch {
        console.log("取消");
      }
    },
    // 删除
    async handleDeleteClass(item) {
      let { data } = await deleteClass({
        classId: item.id,
      });
      if (data.code == STATUS_CODE_OK) {
        this.$notify({
          title: "成功",
          message: "删除成功!",
          type: "success",
        });
        this.hanldeGetClassList(true);
        return;
      }
    },
    // 分页页数改变事件
    handleSizeChange(val) {
      this.pageSize = val;
      this.hanldeGetClassList(true);
    },
    // 分页当前页改变事件
    handleCurrentChange(val) {
      this.currentPage = val;
      this.hanldeGetClassList();
    },
  },
  components: {
    // MHeader,
    // MFotter,
    MMenu,
  },
};
</script>

<style scoped lang="scss">
$bg-color: #fff;
::v-deep .el-divider--horizontal {
  margin: 20px 0;
}
::v-deep .el-menu {
  min-height: 600px;
}
.dialog-box {
  .pdf-box {
    overflow-y: auto;
    max-height: 600px;
    display: flex;
    width: 600px;
    flex-direction: column;
    align-items: center;
    .pdf {
      width: 100%;
      border: 1px solid #000;
      margin-bottom: 10px;
    }
  }
  .dialog-video {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
  }
}
.wrap {
  background-color: $bg-color;
  .container {
    padding-bottom: 80px;
    .content {
      width: 100%;
      display: flex;
      justify-content: space-between;
      margin-top: 30px;
      .right-box {
        flex: 0.2;
        border-radius: 10px 10px 10px 10px;
        .el-menu {
          border-right: none;
        }
      }
      .left-box {
        flex: 0.8;
        margin: 0px 0px 0px 20px;
        padding: 0px 0px 0px 20px;
        box-sizing: border-box;
        background: #fff;
        border-radius: 10px 10px 10px 10px;
        .top {
          .input {
            width: 230px;
          }
          .title {
            font-size: 18px;
            padding-top: 20px;
          }
        }
        .bottom {
          .empty {
            display: flex;
            padding: 30px;
            height: 300px;
            flex-direction: column;
            justify-content: space-evenly;
            align-items: center;
            img {
              width: 250px;
              height: 250px;
            }
            .text {
              color: red;
              cursor: pointer;
            }
          }
        }
      }
    }
  }
}
</style>
